<template>
	<view>
		<view class="cover_box" @click="handleChooseImg">
			<view class="cover" v-if="!isShowImage">
				<text class="iconfont iconjia icon" style="font-size: 50rpx;"></text>
				<text class="text">点击添加封面图</text>
			</view>
			<view class="image_box" v-if="isShowImage">
				<image :src="form.cover" mode="aspectFill"></image>
				<view class="text">点击添加封面图</view>
			</view>

		</view>
		<FormItem label="标题">
			<input type="text" value="" placeholder="请输入作品标题" v-model.trim="form.title" />
		</FormItem>
		<picker mode="selector" :range="range" @change="pickerChange" range-key="title" :value="pickerValue">
			<FormItem label="分类" :isShowRight="true">
				<input type="text" value="" placeholder="请输入作品标题" v-model.trim="categroyTitle" disabled />
			</FormItem>
		</picker>

		<view class="span_box">
			<FormItem label="简介">
				<textarea value="" placeholder="请输入简介" style="padding: 28rpx 0;" :maxlength="250" @input="inputTextare"
					v-model="form.desc" />
			</FormItem>
			<text class="span">250/{{spanNum}}</text>
		</view>

		<view class="" style="padding: 40rpx 30rpx;">
			<MainBigButton @click="handleCreateVideo">{{this.type?'更新作品':'发布作品'}}</MainBigButton>
		</view>
	</view>
</template>

<script>
	import FormItem from '@/components/common/form-item.vue'
	import MainBigButton from '@/components/common/main-big-button.vue'
	export default {
		components: {
			FormItem,
			MainBigButton
		},
		data() {
			return {
				isShowImage: false,
				spanNum: 0,
				range: [],
				form: {
					desc: '',
					title: '',
					cover: '',
					category_id: ''
				},
				categroyTitle: '',
				pickerValue:'',
				startCover:'',
				type:'',
				url:'',
				id:'',
				buttonText:''
			}
		},
		methods: {
			createOrUpdate(){
				if(this.type){
					this.url=`/video/${this.id}`
				}else{
					this.url='/video'
				}
				console.log(this.form)
				this.$H.post(this.url, this.form, {
					token: true,
					noJump: false,
					toast: true,
				}).then(result => {
					console.log(result)
					uni.showToast({
						title: this.type?'发布成功':'修改成功'
					})
					setTimeout(() => {
						uni.navigateTo({
							url: `/pages/list/list?type=video&user_id={this.id}`
						})
					}, 500)
				})
				
			},
			handleCreateVideo() {
				if (this.form.cover === '' || this.form.title === '' || this.form.category_id === '') {
					console.log(1)
					uni.showToast({
						title: '请填写完整信息',
						icon: 'error'
					})
					return;
				}
				if(this.startCover!==this.form.cover){
					this.$H.upload('/upload', {
						filePath: this.form.cover
					}).then(res => {
						console.log(res)
						this.form.cover = res.url
						this.createOrUpdate()
					})
				}
				this.createOrUpdate()
				
				
			},
			handleChooseImg() {
				uni.chooseImage({
					count: 1,
					success: (res) => {
						uni.showLoading({
							title:'上传中',
							mask:true
						})
						this.isShowImage = true
						this.form.cover = res.tempFilePaths[0]
						uni.hideLoading()
					}
				});
			},
			inputTextare(e) {
				console.log(e.value)
				this.spanNum = e.detail.value.length
			},
			pickerChange(e) {
				console.log(e)
				this.categroyTitle = this.range[e.detail.value].title
				this.form.category_id = this.range[e.detail.value].id
			}
		},
		onLoad(e) {
			this.$H.get('/category').then(res => {
				this.range = res
			})
			if(e.type){
				uni.setNavigationBarTitle({
					title:'修改作品'
				})
				this.id=e.id
				this.type=e.type
				this.isShowImage=true
				
				this.$H.get(`/video/${e.id}`,{
					token: true,
					noJump: false,
					toast: true,
				}).then(res=>{
					console.log(res)
					if(res.desc){
						this.spanNum=res.desc.length
					}
					
					this.form=res
					this.startCover=res.cover
					this.range.forEach((i,index)=>{
						if(i.id===res.category_id){
							this.categroyTitle=i.title
							this.pickerValue=index
						}
					})
				})
			}else{
				uni.setNavigationBarTitle({
					title:'发布作品'
				})
			}
			

		}
	}
</script>

<style lang="scss" scoped>
	.cover_box {
		.cover {
			height: 350rpx;
			background-color: #f9fafb;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
		}

		.image_box {
			position: relative;

			image {
				width: 100vw;
				height: 350rpx;
			}

			.text {
				color: #6c757d;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
			}
		}
	}

	.span_box {
		position: relative;

		.span {
			font-size: 24rpx;
			position: absolute;
			bottom: 4rpx;
			right: 30rpx;
			color: #808080;
		}
	}
</style>
